<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes>
    <meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait>
    <meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width" name="viewport">

    <title></title>
    <script src="/common/vue.min.js"></script>
    <script src="/common/axios.min.js"></script>
    <script src="/common/jquery-2.1.1.js"></script>
    <script src="/common/weixinAndio.js"></script>
    <link rel="stylesheet" href="/wap/course/info/index.css">
</head>
<body>
<div id="content">
    <div id="head" v-if="sucShow">
        <div class="headers demo1">
            <p class="title" v-text="contents.name"></p>
            <span class="times">{{contents.publishDate}}</span>
            <span class="number">阅读<i class="num" v-text="contents.readNum"></i></span>
        </div>
        <div class="weixinAudio" v-if="fall === 1" @click="mp">
            <audio :src="contents.attach.path" id="media" width="1" height="1" preload=""></audio>
            <span id="audio_area" class="db audio_area">
                <span class="audio_wrp db">
                    <span class="audio_play_area">
                        <i class="icon_audio_default"></i>
                        <i class="icon_audio_playing"></i>
                    </span>
                    <span class="db audio_info_area">
                        <strong class="db audio_title">听</strong>
                        <span class="audio_source tips_global">来自股神院</span>
                    </span>
                    <span class="db audio_info_area_span">
                        <span id="audio_progress" class="progress_bar" style="width: 0;"></span>
                        <span id="audio_length" class="db audio_length tips_global">00:00</span>
                    </span>
                </span>
            </span>
        </div>
        <div class="audio-Img" v-if="fall===1">
            <p class="audio-Img-img">
                <img src="/wap/course/info/images/ico-12.png" alt="">
            </p>
            <span class="audio-Img-text">点击以上音频收听</span>
        </div>
        <section class="t-body"  id="t-body"  v-html="chartext"></section>
        <div class="reprint">
            <p class="reprint-name">THANK YOU</p>
            <span class="reprint-text">股神院APP原创作品, 欢迎转载, 转载需授权</span>
        </div>

    </div>
    <div class="message" v-if="sucShow">
        <p class="message-name">精选留言</p>
        <span class="message-word clear"  @click="alertSat"  v-if="messageWord">
                <img class="message-word-img" src="/wap/course/info/images/ico-11.png" alt="">
                <span class="message-word-input">写留言</span>
            </span>
        <ul class="message-ul clear">
            <li class="message-list clear" v-for="item in contents.comments">
                <img class="message-list-img" :src="item.user.avatar" alt="">
                <div class="message-list-bag">
                    <div class="message-t">
                        <p v-text="item.user.nickName"></p>
                    </div>
                    <p class="message-text" v-text="item.body"></p>
                    <span class="message-time">{{item.commentDate}}</span>
                    <ul class="message-reply clear" v-if="item.authorComment !== ''">
                        <li class="message-reply-list">
                            <span class="message-reply-name">作者回复</span>
                            <p class="message-reply-text" v-text="item.authorComment"></p>
                            <span class="message-reply-time">{{item.authorCommentDate}}</span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--留言开始-->
<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>

<img id="loading" src="/wap/analysis/images/load.jpg">
<script src="/wap/analysis/index.js"></script>
<script>
    var imageUrl = [];
    var tw = new Vue({
        el: '#content',
        data: {
            contents: {},
            chartext:'',
            chartNum: 0,
            reward: false,
            messageWord: true,
            fall: null,
            sucShow:false
        },
        methods: {
            /*页面数据获取*/
            getNew: function (i) {
                var zxc = this;
                axios.post(baseUrl + 'api/app/section/info/' + id, {}).then(function (response) {
                    console.log(response.data.data);
                    zxc.contents = response.data.data;
                    zxc.fall = response.data.data.attach.type;
                    document.title = response.data.data.name;
					if(response.data.code===20000){
						load();
					}
					if(zxc.chartNum === 0){
						zxc.chartext = response.data.data.content;
						zxc.chartNum++;
						text();
					}
                    if(i===null){
                        zxc.messageWord = false;
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            alertSat: function () {
                alert(JSON.stringify(
                    {
                        type: "native",
                        target: {
                            name: "comment_dialog",
                            config: {
                                body: true,
                                image: false
                            },
                            request: {
                                url: baseUrl + "api/app/section/comment",
                                method: "POST",
                                data: {
                                    sectionId: this.contents.id,
                                    body: ""
                                }
                            }
                        },
                        params: {
                            headTitle: this.contents.title,
                            subTitle: ""
                        }
                    }
                    )
                )
            },
            mp: function () {
                jQuery('.weixinAudio').weixinAudio({
                    autoplay: false
                });
            }
        },
        created: function () {
            if(GetQueryString('pc') !== null || typeof(GetQueryString('pc') === "undefined")){
                this.getNew(GetQueryString('pc'));
            }else{
                this.getNew();
            }
        },
        updated: function () {
            for (var i = 0; i < document.getElementsByClassName('t-body')[0].getElementsByTagName("img").length; i++) {
                document.getElementsByClassName('t-body')[0].getElementsByTagName("img")[i].setAttribute('i', i);
                document.getElementsByClassName('t-body')[0].getElementsByTagName("img")[i].onclick = clickImg;
                imageUrl.push(document.getElementsByClassName('t-body')[0].getElementsByTagName("img")[i].src)
            }
        },
        mounted: function () {
            var _this = this;
            _this.$nextTick(function () {
                _this.sucShow = true;
            })
        },
        filters: {
            data: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            }
        }
    });

    function clickImg() {
        var _this = this;
		if(app.messageWord){
			alert(JSON.stringify({
				images: imageUrl,
				num: _this.getAttribute('i')
			}));
		}
    }
    function load() {
        $('#loading,#content,#video').addClass('active')
    }
    function text() {
        var see = setTimeout(function () {
            if(($('#t-body').children().length)>0){
                clearTimeout(see);
                $('#t-body').find('*').each(function () {
                    this.style.fontSize = (parseInt(this.style.fontSize))/25 + 'rem';
                    this.style.marginTop = (parseInt(this.style.marginTop))/25 + 'rem';
                    this.style.marginBottom = (parseInt(this.style.marginBottom))/25 + 'rem';
                    this.style.marginLeft = (parseInt(this.style.marginLeft))/25 + 'rem';
                    this.style.marginRight = (parseInt(this.style.marginRight))/25 + 'rem';
                    this.style.paddingTop = (parseInt(this.style.paddingTop))/25 + 'rem';
                    this.style.paddingBottom = (parseInt(this.style.paddingBottom))/25 + 'rem';
                    this.style.paddingLeft = (parseInt(this.style.paddingLeft))/25 + 'rem';
                    this.style.paddingRight = (parseInt(this.style.paddingRight))/25 + 'rem';
                    this.style.letterSpacing = (parseInt(this.style.letterSpacing))/25 + 'rem';
                    this.style.height = (parseInt(this.style.height))/25 + 'rem';
                });
            }
        },100);
    }
</script>
</body>
</html>